"use client";

import { useCart } from "@/contexts/CartContext";
import Image from "next/image";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
import { Trash2 } from "lucide-react";

export default function CartPage() {
    const { cartItems, updateQuantity, removeFromCart, loading, error, itemCount, clearCart } = useCart();

    const subtotal = cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0);

    if (loading) return <div className="container text-center py-12">加载购物车...</div>;
    if (error) return <div className="container text-center py-12 text-destructive">错误: {error}</div>;

    return (
        <div className="container mx-auto px-4 py-8">
            <h1 className="text-3xl font-bold mb-8">我的购物车</h1>

            {itemCount === 0 ? (
                <div className="text-center py-20">
                    <p className="text-xl text-muted-foreground mb-4">您的购物车是空的。</p>
                    <Link href="/">
                        <Button>继续购物</Button>
                    </Link>
                </div>
            ) : (
                <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                    <div className="lg:col-span-2 space-y-4">
                        {cartItems.map(item => (
                            <Card key={item.id} className="flex items-center p-4">
                                <div className="relative w-24 h-24 mr-4">
                                    <Image src={item.imageUrl} alt={item.name} fill className="object-cover rounded-md" />
                                </div>
                                <div className="flex-grow">
                                    <h2 className="font-semibold">{item.name}</h2>
                                    <p className="text-sm text-muted-foreground">¥{item.price.toFixed(2)}</p>
                                </div>
                                <div className="flex items-center gap-4">
                                    <Input
                                        type="number"
                                        value={item.quantity}
                                        onChange={(e) => updateQuantity(item.id, parseInt(e.target.value) || 1)}
                                        className="w-20"
                                        min="1"
                                    />
                                    <Button variant="ghost" size="icon" onClick={() => removeFromCart(item.id)}>
                                        <Trash2 className="h-5 w-5" />
                                    </Button>
                                </div>
                            </Card>
                        ))}
                    </div>

                    <div className="lg:col-span-1">
                        <Card>
                            <CardHeader>
                                <CardTitle>订单摘要</CardTitle>
                            </CardHeader>
                            <CardContent className="space-y-4">
                                <div className="flex justify-between">
                                    <span>小计</span>
                                    <span>¥{subtotal.toFixed(2)}</span>
                                </div>
                                <div className="flex justify-between">
                                    <span>运费</span>
                                    <span>待计算</span>
                                </div>
                                <div className="flex justify-between font-bold text-lg border-t pt-4">
                                    <span>总计</span>
                                    <span>¥{subtotal.toFixed(2)}</span>
                                </div>
                            </CardContent>
                            <CardFooter className="flex flex-col gap-2">
                                <Button className="w-full">去结算</Button>
                                <Button variant="outline" className="w-full" onClick={clearCart}>清空购物车</Button>
                            </CardFooter>
                        </Card>
                    </div>
                </div>
            )}
        </div>
    );
} 